<template>
  <div class="test" >
    <div v-loading="loading" class="container right-panel-active">
      <!-- Sign In登录 -->
      <div class="container__form container--signup">
        <form action="#" class="form" id="form1">
          <h2 class="form__title">Sign In</h2>
          <input
            type="text"
            placeholder="User/Email"
            class="input"
            id="loginInput1"
            v-model="userName"
          />
          <!-- <input type="email" placeholder="Email" class="input" /> -->
          <input
            type="password"
            placeholder="Password/EmailCode"
            class="input"
            id="loginInput2"
            v-model="pwd"
          />
          <a href="#" class="link" @click="userLogin()" v-if="seeEmail">
            if you email login,click me send pwd!
          </a>
          <a href="#" class="link" v-if="seeSecond" disabled>
            30s后可再次发送!!!
          </a>
          <a href="#" class="link">Forgot your password?</a>
          <button class="btn" @click="userLogin()">Sign In</button>
        </form>
      </div>

      <!-- Register注册 -->
      <div class="container__form container--signin">
        <form action="#" class="form" id="form2">
          <h2 class="form__title">Register User</h2>
          <input type="text" v-model="registerForm.userName" placeholder="UserName" class="input" />
          <input type="password" v-model="registerForm.userPassword" placeholder="Password" class="input" />
          <input type="text" v-model="registerForm.userDescript" placeholder="input descript" class="input" />
          <button class="btn" @click="userRegister()">Click Register</button>
        </form>
      </div>

      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button class="btn" id="signIn" @click="RegisterIn()">Register In</button><br />
            <button class="btn" id="signIn" @click="backIndex()">
              Back Index
            </button>
          </div>
          <div class="overlay__panel overlay--right">
            <button class="btn" id="signUp" @click="signIn()">Sign In</button><br />
            <button class="btn" id="signIn" @click="backIndex()">
              Back Index
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入外部js
import {login} from '../../static/login'
export default {
      data(){
        return{
          userName:"",
          pwd:"",
          registerForm:{
            registerTime: "",
            userAvatar: "",
            userDescript: "",
            userId: -1,
            userName: "",
            userPassword: "",
            userState: 0
          },
          //用户请求前缀
          userPrefix:"/users/cloud-users",
          //邮件服务前缀
          smsPrefix:"/sms",
          loading:false,
          seeEmail:true,
          seeSecond:false
        }
      },
      mounted(){
          login();  
      },
      created(){
        console.log("store out:"+this.$store.state.loginState);
      },
      watch:{
        seeEmail(val){
          // console.log(val);
          if(!val){
            this.seeSecond=true;
          }
          setInterval(() => {
            this.sendEmailState();
          }, 30000);
        }        
      },
      methods:{
        //发送状态
        sendEmailState(){
          this.seeSecond=false;
          this.seeEmail=true;         
        },
        //账号密码登录
        userLogin(){ 
          //数字字母下划线
          let reg=/^\w{3,20}$/;
          //邮箱
          let mail=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          if(reg.test(this.userName)){
            //账号登录
            let user={
              userName:this.userName,
              userPassword:this.pwd
            }
            if(user.userName===null || user.userName===''){
              this.$message.error('用户名、密码不能为空!!!');
            }else{
              this.$http.post(`${this.userPrefix}/Movie-Users-Services/movieUserLogin?userName=${this.userName}&pwd=${this.pwd}`).then((res)=>{
                // console.log(res.data.token);
                if(res.data.code === 200){
                  sessionStorage.setItem("token",JSON.stringify(res.data.data.token));
                  sessionStorage.setItem("currentUser",JSON.stringify(res.data.data.currentUser));
                  //store 更改登录状态
                  this.$store.commit('updateLoginState');
                  this.$router.push("/");
                  this.$message.success("登录成功!");
                  this.userName = "";
                  this.pwd = "";
                }else{
                  this.$message.error(res.data.msg);
                }                        
              }).catch(error=>{
                this.$message.error("系统异常,请联系管理员!!!");
              });
            }           
          }else if(mail.test(this.userName)){
            //邮箱登录
            this.loading=true;
            this.$http.post(`${this.smsPrefix}/sendMail/loginSendCode?receiveEmail=${this.userName}`).then((res)=>{
              console.log(res);
              if(res.data.code === 200){
                this.loading=false;
                this.$message.success("发送成功,快去登录吧!!!");
                sessionStorage.setItem('token',JSON.stringify(res.data.msg));
                this.seeSecond=true;
                this.seeEmail=false;
                this.userName = "";
                this.pwd = "";                        
              }else{
                this.loading=false;
                this.seeSecond=true;
                this.seeEmail=false;
                this.$message.error(res.data.msg);               
              }  
            }).catch((err)=>{
              this.loading=false;
              this.$message.error("服务器发生错误,,请联系管理员!!!");
            })
          }else{
            this.$message.error("账号/邮箱格式不正确!!!");
          }          
        },
        backIndex(){
          this.$router.push('/');
        },
        //用户注册
        userRegister(){
          let reg=/^\w{3,20}$/;
          if(reg.test(this.registerForm.userName)){
            this.$http.post(this.userPrefix+'/Movie-Users-Services/movieUserRegister',this.registerForm).then((res)=>{
              // console.log(res);
              if(res.data.code === 200){
                this.registerForm = {};
                this.$message.success("注册成功,赶快登录吧!!!");
              }else{
                this.$message.error(res.data.msg);
              }
            }).catch((err=>{
              this.$message.error("注册失败,请联系管理员!!!");
            }))
          }else{
            this.$message.error("账号只能由数字、字母(包括大小写)、下划线组成,必须以字母开头,且长度在5~16位之间!!!");
          }
        },
        //切换注册视图
        RegisterIn(){
          this.userName = "";
          this.pwd = "";
        },
        //切换登录视图
        signIn(){
          this.registerForm.userName = "";
          this.registerForm.userPassword = "";
          this.registerForm.userDescript = "";
        }
      }
};
</script>

<style>
@import '../assets/css/login.css';
</style>
